<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Hello, World</title>
  <style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
  </style>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wgvClHW0q5o2fNiS9DxoVFGFInIat1s6">
    //v3.0版本的引用方式：src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"
  </script>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">
  var map = new BMap.Map("container");
  // 创建地图实例
  var point = new BMap.Point(121.538,38.869);
  // 创建点坐标
  map.centerAndZoom(point, 15);
  // 初始化地图，设置中心点坐标和地图级别
  window.setTimeout(function(){
    map.panTo(new BMap.Point(121.538,38.869));
  }, 2000);

  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

  map.addControl(new BMap.OverviewMapControl());  //缩略地图

  map.addControl(new BMap.MapTypeControl());  //地图类型

  //监听位置
  map.addEventListener('click', function(e){console.log(e.point);
  });

  //标记
  var point1 = new BMap.Point(121.557,38.884);

  var point2 = new BMap.Point(114.316,30.492)

  var point3 = new BMap.Point(121.538,38.869)

  var marker1 = new BMap.Marker(point1);        // 创建标注
  map.addOverlay(marker1);                     // 将标注添加到地图中

  var marker2 = new BMap.Marker(point2);        // 创建标注
  map.addOverlay(marker2);

  var marker3  = new BMap.Marker(point3);        // 创建标注
  map.addOverlay(marker3);

  marker1.onclick= function (){
    map.openInfoWindow(infoWindow1, point1);
  }

  marker2.onclick= function (){
    map.openInfoWindow(infoWindow2, point2);
  }

  marker3.onclick= function (){
    map.openInfoWindow(infoWindow3, point3);
  }

  //信息窗口
  var opts = {
    width : 250,     // 信息窗口宽度
    height: 100,     // 信息窗口高度
    title : "警告!!!"  // 信息窗口标题
  }

  var infoWindow1 = new BMap.InfoWindow("东北财经大学发生火灾", opts);  // 创建信息窗口对象
  map.openInfoWindow(infoWindow1, point1);      // 打开信息窗口

  var infoWindow2 = new BMap.InfoWindow("武昌首义学院发生火灾", opts);  // 创建信息窗口对象
  map.openInfoWindow(infoWindow2, point2);      // 打开信息窗口

  var infoWindow3 = new BMap.InfoWindow("武汉城市职业学院发生火灾", opts);  // 创建信息窗口对象
  map.openInfoWindow(infoWindow3, point3);      // 打开信息窗口



</script>
</body>
</html>
